﻿@using Newtonsoft.Json;
@using CMS_Models.REQ_PARAMS;
@{
    var list = ViewBag.detail;
     var scoreList = JsonConvert.DeserializeObject<List<string>>(list.EVAL_DETAIL);
     var loveList = new List<PRODUCT_PARAM>();
     if (!string.IsNullOrEmpty(list.LOVE_PRODUCTS))
     {
        loveList = JsonConvert.DeserializeObject<List<PRODUCT_PARAM>>(list.LOVE_PRODUCTS);
     }
    var varitions = new List<VARIATION>();
    if (!string.IsNullOrEmpty(list.VARIATIONS))
    {
        varitions = JsonConvert.DeserializeObject<List<VARIATION>>(list.VARIATIONS);
    }
    var name = "";
    var MATERIALS = "";
    if (varitions.Count > 0)
    {
        name = varitions[0].NAME;
        MATERIALS = varitions[0].MATERIALS;
    }
    ViewBag.Title = list.PRODUCT_NAME + " | 大卫杜夫雪茄";
}
<link href="~/Content/static/css/en.css" rel="stylesheet" />
<script src="~/Content/static/dist/js/swiper.min.js"></script>
<div class="page_wrapper">
    <section id="page-toolbar" class="cigars" style="margin-bottom:10px">
        <a href="javascript:history.go(-1)" class="bread"><span>返回</span></a>
    </section>

    <section id="product" class="margin-bottom-80">
        <div id="visual">
            <!-- Swiper -->
            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                @if (varitions.Count > 0)
                {
                foreach (var item in varitions)
                    {
                      <div class="swiper-slide"><img src="@item.VALUE"> </div>
                    }
                }
                else{
                 foreach (var item in JsonConvert.DeserializeObject<List<string>>(list.IMG_URL))
                    {
                        <div class="swiper-slide"><img src="@item"> </div>
                    }
                }
                </div>
                <!-- Add Arrows -->
            </div>
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                @if (varitions.Count > 0)
                {
                 foreach (var item in varitions)
                    {<div class="swiper-slide"><img src="@item.VALUE"></div>
                    }
                }
                else{
                    foreach (var item in JsonConvert.DeserializeObject<List<string>>(list.IMG_URL))
                    {<div class="swiper-slide"><img src="@item"></div>
                    }
                }
                </div>
            </div>
            <!-- Swiper end -->
            <div class="cta-bar">
                <ul id="social-links" class="clearfix">
                    <li class="label">分享</li>
                    <li class="icons">
                        <div class="icons-wrapper">
                            <a class="button basicShareBtn"><img src="/Content/static/images/weibo-light.png" /></a>
                            <a class="button basicShareBtn"><img src="/Content/static/images/weixin-light.png" /></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="info">
            <h3 class="desktop">@list.PD_TYPE_NAME</h3>
            <h2 class="desktop">@list.PRODUCT_NAME</h2>
            <p class="body">
                @list.PRODUCT_REMARK
            </p>
            <span class="mobile-title">Specifics</span>
            <!-- 雪茄 -->
            @if (list.BIG_CLASS != "配件")
            {
                <div class="table-wrapper">
                    <ul>
                        @if (!string.IsNullOrEmpty(list.STRENGTH))
                        {
                            <li class="filters pad strength">
                                <div class="value strength-bar val-@list.STRENGTH">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </div>
                                <div class="label">浓度</div>
                            </li>
                        }
                        @if (!string.IsNullOrEmpty(list.FMT))
                        {
                            <li class="filters">
                                <div class="value">@list.FMT</div>
                                <div class="label">品型</div>
                            </li>
                        }
                    </ul>
                    @if (!string.IsNullOrEmpty(list.PROVEN))
                {
                        <ul>
                            <li class="filters">
                                <div class="value">@list.PROVEN</div>
                                <div class="label">烟叶产区</div>
                            </li>
                        </ul>
                    }
                    @if (!string.IsNullOrEmpty(list.LENG))
                    {
                        <ul>
                            <li class="filters pad">
                                <div class="value">@list.LENG</div>
                                <div class="label">长度</div>
                            </li>
                        </ul>
                    }
                    @if (!string.IsNullOrEmpty(list.RING))
                    {
                        <ul>
                            <li class="filters">
                                <div class="value hide-style">@list.RING</div>
                                <div class="label">环径</div>
                            </li>
                        </ul>
                    }
                    @if (!string.IsNullOrEmpty(list.ENJOYMENT))
                {
                        <ul>
                            <li class="filters">
                                <div class="value">@list.ENJOYMENT 分钟</div>
                                <div class="label">享用时间</div>
                            </li>
                        </ul>
                    }
                </div>
            }
            else
            {<div id="varitions" style="display:none;">@varitions</div>
                <div class="table-wrapper">
                <ul>
                    @if (!string.IsNullOrEmpty(list.DIMENSIONS))
                    {
                    <li class="filters pad">
                        <div class="value">@list.DIMENSIONS</div>
                        <div class="label">尺寸</div>
                    </li>
                    }
                    @if (!string.IsNullOrEmpty(list.WEIGHTS))
                    {<li class="filters pad">
                        <div class="value">@list.WEIGHTS</div>
                        <div class="label">重量</div>
                    </li>
                    }
                    @if (!string.IsNullOrEmpty(list.CAPACITY))
                    {<li class="filters pad">
                        <div class="value">@list.CAPACITY</div>
                        <div class="label">容量</div>
                    </li>
                    }
                    @if (!string.IsNullOrEmpty(list.MATERIALS))
                    {<li class="filters materials pad">
                        <div class="value" id="MATERIALS">@MATERIALS</div>
                        <div class="label">材质</div>
                    </li>
                    }
                    @if (!string.IsNullOrEmpty(list.FINISH))
                    {<li class="filters finish pad hide">
                        <div class="value">@list.FINISH</div>
                        <div class="label">工艺</div>
                    </li>
                    }
                    @if (!string.IsNullOrEmpty(list.MADEIN))
                    {<li class="filters">
                        <div class="value">@list.MADEIN</div>
                        <div class="label">产地</div>
                    </li>
                    }
                </ul>
                <ul class="variations-list">
                    <li class="filters variations">
                        <div class="value" id="Cname">@name</div>
                        @if (varitions.Count > 0)
                        {
                         <div class="swatch-wrapper">
                            @for (int i = 0; i < varitions.Count; i++)
                            {
                                VARIATION item = varitions[i];
                                string materials = item.MATERIALS;
                                string NAME = item.NAME;
                                string CLS = "";
                                if (i == 0)
                                {
                                    CLS = "swatch active";
                                }
                                else
                                {
                                    CLS = "swatch";
                                }
                                <span class=@CLS>
                                    <img src="@item.VALUE" onclick="showName('@materials','@NAME',@i,this)">
                                </span>
                            }

                        </div>
                        <div class="label">颜色</div>

                        }
                    </li>
                </ul>

            </div>
						<!-- info end -->
            }
            <div class="action">
                <a href="/map/" style="margin-top: 20px;" class="btn--gold js-trackProduct" data-product="Primeros by Davidoff Nicaragua"
               data-action="Find a shop">临近店铺</a>
               @* <button class="basicShareBtn btn--gold" style="width: 100%; margin-top: 8px;">分享</button> *@
            </div>
        </div>

    </section>

    <!-- 评分 -->
    <section id="reviews" class="margin-bottom-40">
        <div id="score_wp">
        </div>
        @if (scoreList != null && scoreList.Count > 0)
        {
            <header class="section-header margin-bottom-40">
                <h2 class="caps">评分</h2>
            </header>
            foreach (var item in scoreList)
            {
                <div class="item score">
                    <span class="number">
                        @item.EVAL_SCORE
                    </span>
                    <p class="body">
                        @item.EVAL_DETAIL
                    </p>
                    <a href="@item.EVAL_LINK" target="_blank"><span class="source">查看详情 ></span></a>
                </div>
            }
        }

    </section>
    <!-- 您可能喜欢 -->
    <section id="related">
        <div id="love_wp">
        </div>
        <!-- Related Accessories -->
        @if (loveList.Count > 0)
        {
            <header class="section-header margin-bottom-40">
                <h2 class="caps">您可能喜欢</h2>
            </header>
            for (int j = 0; j < loveList.Count; j++)
            {
                var itemClass = "";
                if (j == 0)
                { itemClass = "two"; }
                if (j == 1)
                { itemClass = "one"; }
                if (j == 2)
                { itemClass = "three"; }
                string simg = "";
                if (!string.IsNullOrEmpty(loveList[j].IMG_URL))
                {
                    simg = JsonConvert.DeserializeObject<List<string>>(loveList[j].IMG_URL)[0];
                }

                <div class="item @itemClass">
                    <a href="/product/detail/@loveList[j].PRODUCT_ID">
                        <div class="image-wrapper">
                            <img src="@simg"
                                 alt="@loveList[j].PRODUCT_NAME">
                        </div>
                        <h3>@loveList[j].PRODUCT_NAME</h3>
                    </a>
                </div>
            }
        }

    </section>

</div>
<script>
    function showName(materials,Name,idx,obj) {
        $("#MATERIALS").html(materials);
        $("#Cname").html(Name);
        $(".swatch").removeClass("active");
        $(obj).parents(".swatch").addClass("active");
        galleryTop.slideTo(idx, 1000, false);
        galleryThumbs.slideTo(idx, 1000, false);
    }
   /* $(function () {*/
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            on:{
             slideChange: function(){
                $(".swatch").eq(this.activeIndex).find("img").trigger("click")
              },
            },
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            },
           on:{
             slideChange: function(){
                $(".swatch").eq(this.activeIndex).find("img").trigger("click")
              },
            },
        });
    /* });*/

</script>